<template>
  <div class="operation-layout full-screen"></div>
</template>

<script setup lang="ts">
import { h } from 'vue'
import Emitter from '../../../tools/emitter'


// 操作场景
</script>

<style lang="scss">
.operation-layout {
  .status-panel,
  .operation-panel {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

    .place-panel,
    .info-panel,
    .progress-panel,
    .func-panel,
    .skill-panel {
      position: absolute;
    }

    .place-item {
      display: inline-block;
      cursor: pointer;
      border: 1px solid rosybrown;
      color: #fff;
      position: absolute;
      user-select: none;

      &.is-active {
        background: rgba($color: #5a6e96, $alpha: 0.2);
      }
    }

    .info-panel {
      color: #fff;
    }

    .progress-panel {
      color: #fff;
    }

    .func-panel {
      padding: 10px;

      .func-btn + .func-btn {
        margin-left: 10px;
      }

      .func-btn {
        outline: none;
        border: none;
        background: rgb(188, 143, 143);
        color: #fff;
        border-radius: 50%;
        height: 2.5rem;
        width: 2.5rem;
        cursor: pointer;

        &:focus {
          background: #5a6e96;
        }
      }
    }

    .skill-panel {
      color: #fff;
      background-color: #5a6e96;
    }
  }
}
</style>
